<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue-2.6.12.js"></script>
</head>
<body>

<!-- v-show 和v-if 的区别之处在于

v-if 会完全删除 标签 或者产生新的标签 达到显示 消失的效果
v-show 只是对标签 添加css 样式 达到不显示的效果

-->

<div id="app">

  <h1 v-show="show"> show= true </h1>

  <h1 v-show="!show">show = false</h1>


  <button type="button" @click="changeClick" >切换</button>

</div>

<script>

  let app = new Vue({

    el:"#app",
    data:{
      show:true,
    },

    methods:{

      changeClick(){

        this.show = !this.show;

      },

    }


  })


</script>



</body>
</html>